<script>
// jsx 实现的
export default {
  name: 'Radio',
  componentName: 'Radio',
  props: {
    value: null,
    identify: null,
    label: null,
    disabled: Boolean
  },
  computed: {
    isChecked() {
      return this.identify === this.value
    },
    model: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
        this.$emit('change', val)
      }
    }
  },
  render(h) {
    let labelEl

    if (this.label) {
      labelEl = 'jsx' + this.label
    } else {
      labelEl = this.$slots.default
    }

    return (
      <label
        class={{
          'm-radio': true,
          'is-checked': this.isChecked,
          'is-disabled': this.disabled
        }}
      >
        <span class={{'m-radio__input': true, 'is-checked': this.isChecked}}>
          <span class="m-radio__inner" />
          <input
            type="radio"
            class="m-radio__radio"
            value={this.identify}
            onClick={this.handlerClick}
            disabled={this.disabled}
            // 直接设置即可
            checked={this.value === this.identify}
          />
        </span>
        <span class="m-radio__label">{labelEl}</span>
      </label>
    )
  },
  methods: {
    handlerClick() {
      if (this.model === this.identify) {
        return
      }
      this.model = this.identify
    }
  }
}
</script>

<style lang="scss" scoped>
$size: 14px;
$colorDisbaled: #c0c4cc;

.m-radio {
  display: inline-block;
  font-size: 14px;
  cursor: pointer;

  &.is-disabled {
    cursor: not-allowed;
    color: $colorDisbaled;
  }

  &__radio {
    position: absolute;
    z-index: -1;
    width: 0;
    height: 0;
    opacity: 0;
  }

  &__input {
    position: relative;
    display: inline-block;
    width: $size;
    height: $size;
    border-radius: 50%;
    border: 1px solid #d6d6d6;
    box-sizing: border-box;
    background: #fff;
    line-height: 1;
    vertical-align: middle;
    &.is-checked {
      background-color: #4779f4;
      position: relative;
      border: none;
      &:after {
        $size: 6px;
        content: '';
        display: inline-block;
        width: $size;
        height: $size;
        border-radius: 50%;
        background: #fff;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -$size/2;
        margin-top: -$size/2;
      }
    }
  }

  &__label {
    line-height: 1;
    vertical-align: middle;
  }
}
</style>
